<template>
  <div class="lvcai-register">
    <div class="container lvcai-register-box">
      <div class="clearfix mgb-30">
        <div class="fl lvcai-register-box-left">
            <div class="register-text">
                <p class="big"><span class="bigger">绿采！</span>欢迎您的选择</p>
                <p class="normal">我们热爱蓝天，我们热爱白云，我们更加热爱我们这个大家庭-地球</p>
                <p class="normal">环保，从你我做起。我们竭诚为您提供优质的环保材料，为您的生活提供那一抹清新健康的绿色。</p>
                <p class="blue">我们在绿采等您！</p>
            </div>
        </div>
        <div class="register-box fr clearfix">
          <ul class="clearfix">
            <li @click="cur=1" :class="{active:cur==1}" class="fr">企业注册</li>
            <li @click="cur=0" :class="{active:cur==0}" class="fl">个人注册</li>
          </ul>
          <div v-show="cur==0" class="register-person-form">
            <el-form :model="registerPersonForm" ref="registerPersonForm" :rules="rules" label-width="0" class="RegisterForm">
              <el-form-item prop="mobile" class="phone-input">
                  <el-input type="number" v-model="registerPersonForm.mobile" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item prop="code" class="code">
                <el-input v-model="registerPersonForm.code" placeholder="请输入验证码"></el-input>
                <el-button type="button" @click="sendcodebtn()" :disabled="disabled" v-if="disabled==false">发送验证码</el-button>
                <el-button type="button" @click="sendcodebtn()" :disabled="disabled" v-if="disabled==true">{{btntxt}}
                </el-button>
              </el-form-item>
              <el-form-item prop="password" class="phone-input">
                  <el-input v-model="registerPersonForm.password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item prop="label" class="file">
                  <el-radio label="1" v-model="registerPersonForm.label">我已阅读<span class="col-blue">《绿色条款》</span></el-radio>
              </el-form-item>
              <el-form-item class="register-person-btn">
                <el-button type="primary" @click="submitLogin('registerPersonForm')">提交</el-button>
              </el-form-item>
              <el-form-item class="register-person-btn mgt-10">
                <p class="">已有账户？请<router-link to="Login" class="col-blue">登录</router-link></p>
              </el-form-item>
            </el-form>
          </div>
          <div v-show="cur==1" class="register-com-form">
            <el-form :model="registerComForm" :rules="rulesCom" ref="registerComForm" label-width="0" class="RegisterForm">
              <el-form-item prop="mobile">
                  <el-input type="number" v-model="registerComForm.mobile" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item prop="code" class="code">
                <el-input v-model="registerComForm.code" placeholder="请输入验证码"></el-input>
                <el-button type="button" @click="sendcodebtn()" :disabled="disabled" v-if="disabled==false">发送验证码</el-button>
                <el-button type="button" @click="sendcodebtn()" :disabled="disabled" v-if="disabled==true">{{btntxt}}
                </el-button>
              </el-form-item>
              <el-form-item prop="password" class="phone-input">
                  <el-input v-model="registerComForm.password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item prop="title">
                  <el-input v-model="registerComForm.title"  placeholder="公司名称简称"></el-input>
              </el-form-item>
              <!-- <el-form-item prop="">
                  <el-input v-model="registerComForm.phone"  placeholder="营业执照公司名称"></el-input>
              </el-form-item>
              <el-form-item prop="">
                  <el-input v-model="registerComForm.phone"  placeholder="真实姓名"></el-input>
              </el-form-item>
              <el-form-item prop="">
                  <el-input v-model="registerComForm.phone"  placeholder="真实姓名"></el-input>
              </el-form-item> -->
              <el-form-item prop="merchant_type">
                <el-select placeholder="请选择企业性质" v-model="registerComForm.merchant_type">
                  <el-option label="1" value="1">采购商</el-option>
                  <el-option label="2" value="2">供应商</el-option>
                  <el-option label="3" value="3">开发商</el-option>
                  <el-option label="4" value="4">建筑商</el-option>
                  <el-option label="5" value="5">厂商</el-option>
                  <el-option label="6" value="6">经销商</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="label" class="mgb-0">
                <el-radio-group v-model="registerComForm.label">
                  <el-radio label="1">我已阅读<span class="col-blue">《绿色条款》</span></el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- <el-form-item prop="label" class="file">
                  <el-radio label="1" v-model="registerComForm.label">我已阅读<span class="col-blue">《绿色条款》</span></el-radio>
              </el-form-item> -->
              <el-form-item class="register-person-btn mgt-5">
                <el-button type="primary" @click="submitLoginCom('registerComForm')">提交</el-button>
              </el-form-item>
              <el-form-item class="register-person-btn">
                <p class="">已有账户？请<router-link to="Login" class="col-blue">登录</router-link></p>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import VDistpicker from "v-distpicker";
//这里要俺需要引入
  // import {isvalidPhone} from '../../config/validate'
  // // 手机号验证
  // export function isvalidPhone(str) {
  //   const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
  //   return reg.test(str)
  // }
  // //定义一个全局的变量 手机号码验证
  // var validPhone=(rule, value,callback)=>{
  //     if (!value){
  //         callback(new Error('请输入电话号码'))
  //     }else  if (!isvalidPhone(value)){
  //       callback(new Error('请输入正确的11位手机号码'))
  //     }else {
  //         callback()
  //     }
  // }
export default {
  name:'Register_new',
  data(){
    const validatePass = (rule,value,callback)=>{
      const reg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error('请输入正确的手机号'));
      }
    }
    return{
      // activeName: 'first'
      cur:0 ,//默认选中第一个tab
      sendcodeobj:{
        mobile:''
      },
      sendcodeNum:'',
      registerPersonForm:{
        mobile:'',
        password:'',
        code:''
      },
      registerComForm:{
        mobile:'',
        code:'',
        password:'',
        label:'',
        title:'',
        merchant_type:''
      },
      rules: {
        mobile:[
            {required: true,message: "请输入手机号码",trigger: "blur"},
            {validator:validatePass}
            ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur'}
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur'}
        ],
        label: [
          { required: true, message: '请勾选协议', trigger: 'blur'}
        ]
      },
      rulesCom: {
        mobile:[
            {required: true,message: "请输入手机号码",trigger: "blur"},
            {validator:validatePass}
            ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur'}
        ],
        label: [
          { required: true, message: '请勾选协议', trigger: 'blur'}
        ],
        merchant_type: [
          { required: true, message: '请选择企业性质', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入输入公司简称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur'}
        ]
      },
      //  Register: {
      //               phone: '',
      //               sendcode: '',
      //           },
      disabled: false,
      time: 0,
      btntxt: "重新发送"
    }
  },
  methods:{
    //手机验证发送验证码
    sendcodebtn() {
        const reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        if(this.cur == 0){
          this.sendcodeobj.mobile = this.registerPersonForm.mobile
        } else if(this.cur == 1){
          this.sendcodeobj.mobile = this.registerComForm.mobile
        }
        if (this.sendcodeobj.mobile == '') {
            this.$message({
                message:'手机号不能为空',
                center: true
            })
            return
        }
        if (!reg.test(this.sendcodeobj.mobile)) {
            this.$message({
                message:'请输入正确的手机号',
                center:true
            })
            return
        } else {
          console.log(this.sendcodeobj.mobile);
          axios.post('/tool/sendCode', {
            mobile:this.sendcodeobj.mobile
          }).then(res=>{
            res = res.data
            if(res.code == 200) {
              this.$message(res.message);
              this.sendcodeNum = res.response.code; 
            } else{
              this.$message(res.message);
            }
          })
          .catch(function (error) {
            console.log(error);
          });
          this.time = 60;
          this.disabled = true;
          this.timer();


            // this.$message({
            //     message: '发送成功',
            //     type: 'success',
            //     center:true
            // });
        }
    },
    //60S倒计时
    timer() {
        if (this.time > 0) {
            this.time--;
            this.btntxt = this.time + "s后重新获取";
            setTimeout(this.timer, 1000);
        } else {
            this.time = 0;
            this.btntxt = "获取验证码";
            this.disabled = false;
        }
    },
    // 个人注册 提交表单
    submitLogin(registerPersonForm){
      console.log(this.registerPersonForm)
      // 先校验验证码再提交注册操作
      this.$refs[registerPersonForm].validate((valid)=>{
        if(valid){
          axios.post('/tool/checkCode', {
            mobile: this.registerPersonForm.mobile,
            code:this.registerPersonForm.code
          }).then(res=>{
            res = res.data
            if(res.code == 200) {
              axios.post('/auth/login', {
                mobile: this.registerPersonForm.mobile,
                password:this.registerPersonForm.password
              }).then(res=>{
                res = res.data
                if(res.code == 1) {
                  that.$message(res.message);
                } else{
                  that.$message(res.message);
                }
              })
              .catch(function (error) {
                console.log(error);
              });
            } else{
              that.$message(res.message);
            }
          })
          .catch(function (error) {
            console.log(error);
          });
        }
      })
    },
     // 企业注册
    submitLoginCom(registerComForm){
      console.log(this.registerComForm)
      // 先校验验证码再提交注册操作
      this.$refs[registerComForm].validate((valid)=>{
        if(valid){
          axios.post('/tool/checkCode', {
            mobile: this.registerPersonForm.mobile,
            code:this.registerPersonForm.code
          }).then(res=>{
            res = res.data
            if(res.code == 200) {
              axios.post('/auth/login', {
                mobile:this.registerComForm.mobile,
                password:this.registerComForm.password,
                merchant_type:this.registerComForm.merchant_type,
                title:this.registerComForm.title
              }).then(res=>{
                res = res.data
                if(res.code == 200) {
                  that.$message(res.message);
                } else{
                  that.$message(res.message);
                }
              })
              .catch(function (error) {
                console.log(error);
              });
            } else{
              that.$message(res.message);
            }
          })
          .catch(function (error) {
            console.log(error);
          });
        }
      })
    },
    // 个人注册 提交表单
    // submitLogin(registerPersonForm){
    //   debugger;
    //   console.log(this.registerPersonForm)
    //   debugger;
    //   var that = this
    //   this.$refs[registerPersonForm].validate((valid)=>{
    //     if(valid){
    //       axios.post('/auth/register', {
    //         // params: this.formInline
    //         mobile:this.registerPersonForm.mobile,
    //         password:this.registerPersonForm.password
    //       }).then(res=>{
    //         // this.$message(this.message);
    //         // backHistory()
    //         res = res.data
    //         if(res.code == 1) {
    //           that.$message(res.message);
    //         } else{
    //           that.$message(res.message);
    //         }
    //       })
    //       .catch(function (error) {
    //         console.log(error);
    //       });
    //     }
    //   })
    // },
    // 企业注册
    // submitLoginCom(registerComForm){
    //   debugger;
    //   var that = this
    //   this.$refs[registerComForm].validate((valid)=>{
    //     if(valid){
    //       axios.post('/auth/register', {
    //         // params: this.formInline
    //         mobile:this.registerComForm.mobile,
    //         password:this.registerComForm.password,
    //         merchant_type:this.registerComForm.merchant_type,
    //         title:this.registerComForm.title
    //       }).then(res=>{
    //         // this.$message(this.message);
    //         // backHistory()
    //         res = res.data
    //         if(res.code == 1) {
    //           that.$message(res.message);
    //         } else{
    //           that.$message(res.message);
    //         }
    //       })
    //       .catch(function (error) {
    //         console.log(error);
    //       });
    //     }
    //   })
    // },
  },
  created(){
    this.$emit('public_header', false);
    this.$emit('public_headerhover', true);
    this.$emit('public_footer', true);
  }
}
</script>

<style>
 @import '../../../static/style/register_new';
</style>

